<template>
  <div>
    <div class="factory-title">{{title}}</div>
    <div class="factory-box" v-if="pageType == 1">
      <div class="item"
           v-for="(item,index) in lineList"
           v-bind:key="index"
           @click="selectLine(item)"
           :class="[item.number, {'active': item.number == currentLine}]">
        <span :class="{'alarm': item.alarm}">{{item.number}}</span>
        <div class="tip-box">
          <div class="line"><div class="pulse"></div></div>
          <div class="tip-content">{{item.name}}</div>
        </div>
      </div>
    </div>
    <div class="factory-box2" v-if="pageType == 2 || pageType == 3">
      <div
        v-for="(item,index) in storeList"
        v-bind:key="index"
        @click="selectStore(item)"
        class="item"
        :class="[item.number, {'active': item.number == currentStore}, {'alarm': item.alarm}]">
        <div class="tip-box">
          <div class="line"><div class="pulse"></div></div>
          <div class="tip-content">{{item.name}}</div>
        </div>
      </div>
    </div>
    <div class="sidebar-left" v-if="pageType == 1">
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">生产订单情况</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Bar :chart-id="chart1Id" :chart-data="seriesData1"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">客户需求及库存情况</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Bar :chart-id="chart2Id" :chart-data="seriesData2"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">实时警报</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <ul class="alarmList">
              <li>某某表负荷超高</li>
              <li>表功率因数低</li>
              <li>某某表负荷超高</li>
              <li>表功率因数低</li>
              <li>表功率因数低</li>
            </ul>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
    </div>
    <div class="sidebar-right" v-if="pageType == 1">
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">节拍对比</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Bar2 :chart-id="chart3Id" :chart-data="seriesData3"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
      <div class="bar-box box5">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">客户需求及库存情况</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Bar :chart-id="chart4Id" :chart-data="seriesData4"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
    </div>
    <div class="sidebar-left" v-if="pageType == 2">
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">库位占有率</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Line1 :chart-id="chart5Id" :chart-data="seriesData5"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
      <div class="bar-box warning">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">库存期量/实际数量</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Bar :chart-id="chart6Id" :chart-data="seriesData6"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">实时警报</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <ul class="alarmList">
              <li>某某表负荷超高</li>
              <li>表功率因数低</li>
              <li>某某表负荷超高</li>
              <li>表功率因数低</li>
              <li>表功率因数低</li>
            </ul>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
    </div>
    <div class="sidebar-right page2" v-if="pageType == 2">
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">库位资金</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Line1 :chart-id="chart7Id" :chart-data="seriesData7"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">库存一致性</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Bar :chart-id="chart8Id" :chart-data="seriesData8"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
    </div>
    <div class="sidebar-left" v-if="pageType == 3">
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">接收流量</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Line1 :chart-id="chart9Id" :chart-data="seriesData9"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
      <div class="bar-box warning">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">库存期量/实际数量</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Bar :chart-id="chart6Id" :chart-data="seriesData6"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">实时警报</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <ul class="alarmList">
              <li>某某表负荷超高</li>
              <li>表功率因数低</li>
              <li>某某表负荷超高</li>
              <li>表功率因数低</li>
              <li>表功率因数低</li>
            </ul>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
    </div>
    <div class="sidebar-right page3" v-if="pageType == 3">
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">库位资金</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Line1 :chart-id="chart7Id" :chart-data="seriesData7"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
      <div class="bar-box">
        <div class="title">
          <div class="title-right">
            <div class="title-bg">库存一致性</div>
          </div>
        </div>
        <div class="content">
          <div class="content-bg">
            <div class="bar-item">
              <Bar :chart-id="chart8Id" :chart-data="seriesData8"/>
            </div>
          </div>
          <div class="content-bottom"></div>
        </div>
      </div>
    </div>
    <div class="nav-btns">
      <div class="btn" @click="backHome()">返回首页</div>
      <div class="btn">历史数据</div>
    </div>
  </div>
</template>

<script>
import Bar from '../components/Bar.vue'
import Bar2 from '../components/Bar2.vue'
import Line1 from '../components/Line.vue'
import input1 from '../components/input.vue'
import input2 from '../components/input2.vue'
export default {
  name: 'index',
  components: {
    input1,
    input2,
    Bar,
    Bar2,
    Line1
  },
  data () {
    return {
      title: '',
      pageType: '',
      currentLine: 'HAT048', // 当前产线number
      currentStore: 'H003-1', // 当前仓库number
      lineList: [
        {
          number: 'HAT048',
          name: 'M-F、M-Y、POLO、PQ35后减振器装配',
          alarm: false
        },
        {
          number: 'HAT126',
          name: 'TIGUAN NF后悬装配线',
          alarm: true
        },
        {
          number: 'HAT136',
          name: 'LAVIDA NF后减振支柱装配',
          alarm: false
        },
        {
          number: 'HAT141',
          name: 'MQB控制臂压装扩能线',
          alarm: false
        },
        {
          number: 'HAT013',
          name: 'M-S/M-K/PQ35副车架',
          alarm: false
        },
        {
          number: 'HAT009',
          name: 'M-Y前悬挂装配线(左)',
          alarm: false
        },
        {
          number: 'HAT010',
          name: 'M-Y前悬挂装配线(右)',
          alarm: false
        },
        {
          number: 'HAT023',
          name: 'POLO/M-F前悬挂装配线（左）',
          alarm: false
        },
        {
          number: 'HAT025',
          name: 'B2/POLO制动器装配',
          alarm: false
        },
        {
          number: 'HAT122',
          name: 'C-Model装配线',
          alarm: false
        },
        {
          number: 'HAT123',
          name: 'TIGUAN NF前副车架装配线',
          alarm: false
        },
        {
          number: 'HAT138',
          name: 'LAVIDA NF 前悬架装配线',
          alarm: false
        },
        {
          number: 'HAT133',
          name: '四线并两线副车架装配线',
          alarm: false
        },
        {
          number: 'HAT135',
          name: '四线并两线后桥装配线',
          alarm: false
        },
        {
          number: 'HAT145',
          name: 'LAVIDA BEV 后桥线',
          alarm: false
        },
        {
          number: 'HAT121',
          name: 'TIGUAN后桥装配线',
          alarm: false
        },
        {
          number: 'HAT134',
          name: 'LAVIDA NF副车架压装',
          alarm: false
        },
        {
          number: 'HAT124',
          name: 'TIGUAN NF前悬装配线（左/右）',
          alarm: false
        }
      ],
      storeList: [
        {
          number: 'H003-1',
          name: '平库地堆',
          alarm: true
        },
        {
          number: 'H003-2',
          name: '高位货架',
          alarm: false
        },
        {
          number: 'H003-3',
          name: '托盘立库',
          alarm: false
        },
        {
          number: 'H003-4',
          name: '料箱立库',
          alarm: false
        },
      ],
      chart1Id: 'chart1',
      chart2Id: 'chart2',
      chart3Id: 'chart3',
      chart4Id: 'chart4',
      chart5Id: 'chart5',
      chart6Id: 'chart6',
      chart7Id: 'chart7',
      chart8Id: 'chart8',
      chart9Id: 'chart9',
      chart1Data: [
        {
          name: 'A产品',
          num1: 260,
          num2: 360
        },
        {
          name: 'B产品',
          num1: 240,
          num2: 150
        },
        {
          name: 'C产品',
          num1: 255,
          num2: 340
        },
        {
          name: 'D产品',
          num1: 200,
          num2: 230
        }
      ],
      chart2Data: [
        {
          name: 'A产品',
          num1: 260,
          num2: 360
        },
        {
          name: 'B产品',
          num1: 240,
          num2: 150
        },
        {
          name: 'C产品',
          num1: 255,
          num2: 340
        },
        {
          name: 'D产品',
          num1: 200,
          num2: 230
        }
      ],
      chart3Data: [
        {
          num1: 8,
          num2: 10
        }
      ],
      chart4Data: [
        {
          name: 'A物料',
          num1: 16,
          num2: 21
        },
        {
          name: 'B物料',
          num1: 14,
          num2: 10
        },
        {
          name: 'C物料',
          num1: 17,
          num2: 20
        },
        {
          name: 'D物料',
          num1: 13,
          num2: 15
        }
      ],
      chart5Data: [
        {
          name: '2',
          num1: 16
        },
        {
          name: '4',
          num1: 14
        },
        {
          name: '6',
          num1: 17
        },
        {
          name: '8',
          num1: 13
        },
        {
          name: '10',
          num1: 83
        }
      ],
      chart6Data: [
        {
          name: 'A产品',
          num1: 260,
          num2: 360
        },
        {
          name: 'B产品',
          num1: 240,
          num2: 150
        },
        {
          name: 'C产品',
          num1: 255,
          num2: 340
        },
        {
          name: 'D产品',
          num1: 200,
          num2: 230
        }
      ],
      chart7Data: [
        {
          name: '2',
          num1: 16
        },
        {
          name: '4',
          num1: 14
        },
        {
          name: '6',
          num1: 17
        },
        {
          name: '8',
          num1: 13
        },
        {
          name: '10',
          num1: 83
        }
      ],
      chart8Data: [
        {
          name: 'A物料',
          num1: 16,
          num2: 21
        },
        {
          name: 'B物料',
          num1: 14,
          num2: 10
        },
        {
          name: 'C物料',
          num1: 17,
          num2: 20
        },
        {
          name: 'D物料',
          num1: 13,
          num2: 15
        }
      ],
      chart9Data: [
        {
          name: '2',
          num1: 16
        },
        {
          name: '4',
          num1: 14
        },
        {
          name: '6',
          num1: 17
        },
        {
          name: '8',
          num1: 13
        },
        {
          name: '10',
          num1: 83
        }
      ],
      seriesData1: {
        max: 500,
        legendData: ['计划数', '完成数'],
        data: {}
      },
      seriesData2: {
        max: 500,
        legendData: ['需求数', '成品库存'],
        data: {}
      },
      seriesData3: {
        max: 15,
        legendData: ['标准节拍', '实际节拍'],
        data: {}
      },
      seriesData4: {
        max: 29,
        legendData: ['要求配送时间', '实际配送时间'],
        data: {}
      },
      seriesData5: {
        max: 100,
        legendData: ['物料'],
        data: {}
      },
      seriesData6: {
        max: 500,
        legendData: ['期量', '实际数量'],
        data: {}
      },
      seriesData7: {
        max: 100,
        legendData: ['资金'],
        data: {}
      },
      seriesData8: {
        max: 500,
        legendData: ['实际配送时间', '要求配送时间'],
        data: {}
      },
      seriesData9: {
        max: 100,
        legendData: ['物料'],
        data: {}
      }
    }
  },
  mounted () {
    let pageInfo = JSON.parse(localStorage.getItem('pageInfo'))
    if (pageInfo.num === 'btn5') {
      this.title = '装配线'
      this.pageType = 1
    }
    if (pageInfo.num === 'btn1' || pageInfo.num === 'btn2' || pageInfo.num === 'btn3' || pageInfo.num === 'btn4') {
      if (pageInfo.type === 'kucun') {
        this.title = '仓库库存状态'
        this.pageType = 2
      } else if (pageInfo.type === 'wuliu') {
        this.title = '仓库物流状态'
        this.pageType = 3
      }
    }
    this.seriesData1.data = this.getSeriesData(this.chart1Data)
    this.seriesData2.data = this.getSeriesData(this.chart2Data)
    this.seriesData3.data = this.getSeriesData(this.chart3Data)
    this.seriesData4.data = this.getSeriesData(this.chart4Data)
    this.seriesData5.data = this.getSeriesData(this.chart5Data)
    this.seriesData6.data = this.getSeriesData(this.chart6Data)
    this.seriesData7.data = this.getSeriesData(this.chart7Data)
    this.seriesData8.data = this.getSeriesData(this.chart8Data)
  },
  methods: {
    toAssemblyLine () {
      this.$router.push({path: '/assemblyline'})
    },
    getSeriesData (data) {
      let seriesData = {
        names: [],
        series1: [],
        series2: []
      }
      for (let i = 0; i < data.length; i++) {
        if (data[i].name) {
          seriesData.names.push(data[i].name)
        }
        if (data[i].num1) {
          seriesData.series1.push(data[i].num1)
        }
        if (data[i].num2) {
          seriesData.series2.push(data[i].num2)
        }
      }
      return seriesData
    },
    selectLine (item) {
      this.currentLine = item.number
    },
    selectStore (item) {
      this.currentStore = item.number
    },
    backHome () {
      this.$router.push({path: '/'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .factory-box {
    background: url('../assets/factory2.png') no-repeat;
    background-size: 100% auto;
    width: 1041px;
    position: absolute;
    left: 437px;
    height: 611px;
    top: 340px;
    color: #AEC9FF;
    font-size: 24px;
    background-position: center bottom;
  }
  .factory-box .item {
    font-style: italic;
    font-size: 18px;
    position: absolute;
    font-weight: bolder;
    color: #cccccc;
    cursor: pointer;
    transform:rotate(-30deg);
    -ms-transform:rotate(-30deg); /* Internet Explorer */
    -moz-transform:rotate(-30deg); /* Firefox */
    -webkit-transform:rotate(-30deg); /* Safari 和 Chrome */
  }
  .factory-box .item:hover {
    color: #ffffff;
  }
  .factory-box .item .alarm {
    color: #C91436 !important;
    padding-right: 30px;
    background: url('../assets/alarm.png') no-repeat right top;
    background-size: 25px auto;
  }
  .tip-box {
    position: absolute;
    display: none;
  }
  .factory-box .item .tip-box {
    right: -240px;
    top: 300%;
    transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* Internet Explorer */
    -moz-transform:rotate(30deg); /* Firefox */
    -webkit-transform:rotate(30deg); /* Safari 和 Chrome */
  }
  .active .tip-box {
    display: block;
  }
  .tip-box .line {
    width: 40px;
    height: 2px;
    background-color: #2AC0F7;
    left: -40px;
    top: 50%;
    margin-top: -1px;
    position: absolute;
  }
  .tip-box .line:before {
    content: '';
    width: 14px;
    height: 14px;
    display: block;
    border-radius: 100px;
    position: absolute;
    top: 50%;
    left: -14px;
    margin-top: -7px;
    background-color: #00EAFF;
    border: 4px solid rgba(255,255,255,0.8);
  }
  .tip-box .tip-content {
    border: 2px solid #2AC0F7;
    background-color: #084F83;
    font-size: 16px;
    border-radius: 100px;
    font-style: normal;
    padding: 2px 8px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    color: #ffffff;
  }
  .factory-box .item.active, .factory-box2 .item.active {
    color: #ffffff;
    z-index: 999;
  }
  .factory-box .item.HAT048 {
    left: 90px;
    top: 154px;
  }
  .factory-box .item.HAT126 {
    left: 150px;
    top: 195px;
  }
  .factory-box .item.HAT136 {
    left: 0;
    top: 175px;
  }
  .factory-box .item.HAT141 {
    left: 65px;
    top: 305px;
  }
  .factory-box .item.HAT141 {
    left: 65px;
    top: 305px;
  }
  .factory-box .item.HAT013 {
    left: 725px;
    top: 75px;
  }
  .factory-box .item.HAT009 {
    left: 390px;
    top: 505px;
  }
  .factory-box .item.HAT010 {
    left: 485px;
    top: 475px;
  }
  .factory-box .item.HAT023 {
    left: 550px;
    top: 530px;
  }
  .factory-box .item.HAT025 {
    left: 492px;
    top: 264px;
  }
  .factory-box .item.HAT122 {
    left: 565px;
    top: 218px;
  }
  .factory-box .item.HAT123 {
    left: 562px;
    top: 304px;
  }
  .factory-box .item.HAT138 {
    left: 634px;
    top: 250px;
  }
  .factory-box .item.HAT133 {
    left: 692px;
    top: 387px;
  }
  .factory-box .item.HAT135 {
    left: 830px;
    top: 10px;
  }
  .factory-box .item.HAT145 {
    left: 807px;
    top: 128px;
  }
  .factory-box .item.HAT121 {
    left: 897px;
    top: 62px;
  }
  .factory-box .item.HAT134 {
    left: 930px;
    top: 215px;
  }
  .factory-box .item.HAT124 {
    left: 760px;
    top: 300px;
  }
  .factory-title {
    background: url('../assets/title2.png') no-repeat;
    background-size: cover;
    width: 450px;
    height: 66px;
    line-height: 66px;
    color: #ffffff;
    font-size: 38px;
    font-weight: bolder;
    position: absolute;
    top: 163px;
    left: 50%;
    margin-left: -225px;
  }
  .sidebar-left {
    width: 405px;
    margin-left: 32px;
    float: left;
  }
  .alarmList {
    margin: 40px 40px 0;
    height: 240px;
    overflow-y: scroll;
  }
  .alarmList li {
    border-bottom:1px dashed rgba(69,77,168,1);
    color: #ffffff;
    font-size: 16px;
    padding: 15px 30px;
    text-align: left;
  }
  .sidebar-right {
    float: right;
    width: 495px;
    margin-right: 58px;
  }

  .factory-box2 {
    background: url('../assets/factory3.png') no-repeat;
    background-size: 100% auto;
    width: 903px;
    position: absolute;
    left: 546px;
    height: 742px;
    top: 230px;
    color: #00032f;
    font-size: 24px;
    background-position: center bottom;
  }
  .factory-box2 .item {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
  }
  .factory-box2 .item .tip-box {
    left: 50%;
    top: 50%;
  }
  .factory-box2 .H003-1 {
    left: 0;
    top: 118px;
    width: 335px;
    height: 345px;
  }
  .factory-box2 .H003-1.alarm {
    background-image: url('../assets/pingdi-special.png');
  }
  .factory-box2 .H003-2 {
    left: 307px;
    top: 0;
    width: 335px;
    height: 308px;
  }
  .factory-box2 .H003-2.alarm {
    left: 307px;
    top: 0;
    width: 335px;
    height: 308px;
    background-image: url('../assets/huojia-special.png');
  }
  .factory-box2 .H003-4 {
    right: 0;
    top: 200px;
    width: 333px;
    height: 318px;
  }
  .factory-box2 .H003-4.alarm {
    background-image: url('../assets/liaoxiang-special.png');
  }
  .factory-box2 .H003-3 {
    left: 201px;
    top: 382px;
    width: 335px;
    height: 360px;
  }
  .factory-box2 .H003-3.alarm {
    background-image: url('../assets/tuopan-special.png');
  }
  .sidebar-right.page2, .sidebar-right.page3 {
    width: 405px;
  }
  .nav-btns {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    text-align: center;
  }
  .nav-btns .btn {
    width: 190px;
    height: 50px;
    font-size: 20px;
    color: #ffffff;
    background: url('../assets/btn-bg.png') no-repeat left center;
    background-size: cover;
    display: inline-block;
    margin: 0 10px;
    line-height: 50px;
    cursor: pointer;
  }
  @keyframes warn {
    0% {
      transform: scale(1.1);
      opacity: 0.1;
    }
    25% {
      transform: scale(1.3);
      opacity: 0.3;
    }
    50% {
      transform: scale(1.5);
      opacity: 0.5;
    }
    75% {
      transform: scale(1.3);
      opacity: 0.3;
    }
    100% {
      transform: scale(1.1);
      opacity: 0.1;
    }
  }
  .pulse {
    position: absolute;
    width: 14px;
    height: 14px;
    left: -14px;
    top: 50%;
    margin-top: -7px;
    border: 6px solid #ffffff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    opacity: 1;
    -webkit-animation: warn 3s ease-out;
    -moz-animation: warn 3s ease-out;
    animation: warn 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
</style>
